{% extends "website/base.html" %}
{% block content %}
<section class="staff-signin-wrap" style="max-width:480px;margin:64px auto 90px;padding:0 18px">
  <div class="card" style="padding:clamp(22px,4vw,36px)">
    <div style="font-size:32px;margin-bottom:12px" aria-hidden="true">🩺</div>
    <h1 style="font-size:clamp(26px,4vw,34px);margin:0 0 8px">Staff Portal</h1>
    <p style="margin:0 0 24px;color:#52657b">Secure access for authorised Telehealthscare Services team members.</p>
    <form method="post" action="{% url 'website:staff_login' %}">
      {% csrf_token %}<input type="hidden" name="next" value="{{ next }}">
      {% if form.non_field_errors %}<div role="alert" style="color:#9b1c1c;margin-bottom:16px">{{ form.non_field_errors }}</div>{% endif %}
      <label for="id_username" style="display:block;font-weight:700;margin-bottom:7px">Username</label>
      <input id="id_username" name="username" autocomplete="username" required autofocus style="display:block;width:100%;box-sizing:border-box;padding:13px;border:1px solid #a7b7c7;border-radius:10px;margin-bottom:18px;color:#142333;background:white">
      <label for="id_password" style="display:block;font-weight:700;margin-bottom:7px">Password</label>
      <input id="id_password" name="password" type="password" autocomplete="current-password" required style="display:block;width:100%;box-sizing:border-box;padding:13px;border:1px solid #a7b7c7;border-radius:10px;margin-bottom:24px;color:#142333;background:white">
      <button type="submit" class="btn btn-primary" style="width:100%;justify-content:center;min-height:48px;background:#08776e;color:white">Sign in to Staff Portal</button>
    </form>
  </div>
</section>
{% endblock %}